<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
        <Form-item label="订单编号" prop="orderSn">
          <Input type="text" v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 160px" />
        </Form-item>
        <Form-item label="会员名称" prop="buyerName">
          <Input type="text" v-model="searchForm.buyerName" clearable placeholder="请输入会员名称" style="width: 160px" />
        </Form-item>
        <Form-item label="会员电话" prop="consigneeMobile">
          <Input type="text" v-model="searchForm.consigneeMobile" clearable placeholder="请输入会员电话"
            style="width: 160px" />
        </Form-item>
        <Form-item label="商品名称" prop="goodsName">
          <Input type="text" v-model="searchForm.goodsName" clearable placeholder="请输入商品名称" style="width: 160px" />
        </Form-item>
        <Form-item label="地区" prop="consigneeNoName">
          <Select v-model="searchForm.consigneeNoName" clearable style="width: 160px" placeholder="请选择地区"
            @on-change="handleAreaChange">
            <Option value="DownTown">DownTown</Option>
            <Option value="Etobicoke">Etobicoke(远端)</Option>
            <Option value="Mississaug">Mississaug(远端)</Option>
            <Option value="Scarbough">Scarbough</Option>
            <Option value="Markham">Markham</Option>
            <Option value="Richmond Hill">Richmond Hill</Option>
            <Option value="North York">North York</Option>
            <Option value="Vaughan">Vaughan</Option>
            <Option value="Aurora">Aurora(远端)</Option>
            <Option value="Newmarket">Newmarket(远端)</Option>
          </Select>
        </Form-item>
        <Form-item label="订单状态" prop="orderStatus">
          <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 160px">
            <Option value="UNPAID">未付款</Option>
            <Option value="PAID">已付款</Option>
            <Option value="UNDELIVERED">待发货</Option>
            <Option value="SORTINGCOMPLETED">分拣完成</Option>
            <Option value="DELIVERYINPROGRESS">配送中</Option>
            <Option value="DELIVERED">已发货</Option>
            <Option value="COMPLETED">已完成</Option>
            <Option value="CANCELLED">已取消</Option>
            <Option value="STAY_PICKED_UP">待自提</Option>
          </Select>
        </Form-item>
        <!-- <Form-item label="订单类型" prop="orderType">
          <Select
            v-model="searchForm.orderPromotionType"
            placeholder="请选择"
            clearable
            style="width: 160px"
          >
            <Option value="NORMAL">普通订单</Option>
            <Option value="PINTUAN">拼团订单</Option>
            <Option value="GIFT">赠品订单</Option>
            <Option value="POINTS">积分订单</Option>
            <Option value="KANJIA">砍价订单</Option>
          </Select>
        </Form-item> -->
        <Form-item label="下单时间">
          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
            @on-change="selectDateRange" placeholder="选择起始时间" style="width: 160px"></DatePicker>
        </Form-item>
        <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
        <Button @click="handleReset" class="search-btn">重置</Button>
      </Form>
      <div class="export">
        <!-- <Button type="primary" class="mr_10" @click="expressOrderDeliver">
          批量发货
        </Button>-->
        <Button type="primary" class="mr_10" @click="showUpdate">批量修改订单状态</Button>
        <download-excel style="display: inline-block" :data="data" :fields="excelColumns" :fetch="exportOrder"
          name="待发货订单.xls">
          <Button>导出待发货订单</Button>
        </download-excel>
        <Button @click="printFjOrder" type="primary" ghost style="margin-left: 10px">打印分拣单</Button>
        <Button @click="printOrder" type="primary" ghost style="margin-left: 10px">打印发货单</Button>
        <Button @click="showExportReportModal" type="primary" ghost style="margin-left: 10px">导出月报</Button>
      </div>
      <Table :loading="loading" border :columns="columns" :data="data" ref="table" @on-selection-change="changeSelect">
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
          show-sizer></Page>
      </Row>
    </Card>
    <Modal title="批量修改订单状态" v-model="showModal" @on-ok="confirmUpdate">
      <Form ref="updateForm" :model="updateForm" inline :label-width="70">
        <Form-item label="订单状态" prop="goodsName">
          <Select v-model="updateForm.orderStatus" placeholder="请选择" clearable style="width: 160px">
            <Option value="UNPAID">未付款</Option>
            <Option value="PAID">已付款</Option>
            <Option value="UNDELIVERED">待发货</Option>
            <Option value="SORTINGCOMPLETED">分拣完成</Option>
            <Option value="DELIVERYINPROGRESS">配送中</Option>
            <Option value="DELIVERED">已发货</Option>
            <Option value="COMPLETED">已完成</Option>
            <Option value="CANCELLED">已取消</Option>
            <Option value="STAY_PICKED_UP">待自提</Option>
          </Select>
        </Form-item>
      </Form>
    </Modal>
    <!-- 打印分拣单 -->
    <Modal v-model="printFjModal" width="1100" @on-cancel="printCancel">
      <p slot="header" style="line-height: 26px; height: 26px">
        <span style="float: left">打印分拣单</span>
        <Button size="small" style="margin-right: 35px; float: right; padding-bottom: 2px" @click="printHiddenInfo">
          <template v-if="printHiddenFlag">显示</template>
          <template v-else>隐藏</template>敏感信息
        </Button>
      </p>
      <div style="overflow-y: auto; overflow-x: hidden" id="printFjInfo">
        <div class="print-page" v-for="(orderInfo, index) in printList" :key="'printList' + index">
          <Row>
            <Col>
            <img src="https://minio.foodyie.net/lilishop/MANAGER/undefined/9467528b82a942959ef9de76feccd641.png"
              width="150" />
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="text-align: center; font-size: 18px; font-weight: bold">
              分拣单 Picking List
            </div>
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="
                  text-align: center;
                  font-size: 18px;
                  font-weight: bold;
                  color: red;
                ">
              Order number:{{ orderInfo.order.orderLookSn }}
            </div>
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="text-align: center; font-size: 16px">
              Order Date.{{ orderInfo.order.completeTime }}
            </div>
            </Col>
          </Row>
          <div style="background: #cccccc; padding: 5px">
            <Row>
              <Col>
              <div style="text-align: center; font-size: 18px; font-weight: bold">
                Customer Contact
              </div>
              </Col>
            </Row>
            <Row v-if="orderInfo.order.remark !== ''">
              <Col span="24">
              <p class="lineH30 f14">remark：{{ orderInfo.order.remark }}</p>
              </Col>
            </Row>
            <Row>
              <Col span="12">
              <p class="lineH30 f14">
                Customer：{{ orderInfo.order.consigneeName }}
              </p>
              </Col>
              <Col span="12" v-if="orderInfo.order.consigneeMobile">
              <p class="lineH30 f14" v-if="printHiddenFlag">
                Phone：{{
                  orderInfo.order.consigneeMobile.replace(
                    /^(.{3})(?:\d+)(.{4})$/,
                    "$1****$2"
                  )
                }}
              </p>
              <p class="lineH30 f14" v-else>
                Phone：{{ orderInfo.order.consigneeMobile }}
              </p>
              </Col>
            </Row>
            <Row>
              <Col span="24">
              <p class="lineH30 f14">
                shipping address：{{ orderInfo.order.consigneeAddressPath
                }}{{ orderInfo.order.consigneeDetail }}
              </p>
              </Col>
            </Row>
              <!-- 在这里添加订单备注和商家备注 -->
              <Row >
              <Col span="24">
              <p class="lineH30 f14">Buyer Remark：{{ orderInfo.order.remark }}</p>
              </Col>
            </Row>
            <Row>
              <Col span="24">
              <p class="lineH30 f14">Order Remark：{{ orderInfo.order.sellerRemark }}</p>
              </Col>
            </Row>
          </div>

          <Row>
            <Col span="24">
            <div class="printgoodinfo">
              <el-table :data="orderInfo.data.filter(item => (item.num - (item.returnGoodsNumber || 0)) > 0)" :columns="groupShipColumns2" border>
                <el-table-column type="selection" width="35">
                </el-table-column>
                <el-table-column prop="goodsVO.goodsContainer" label="LOCATION" width="100">
                </el-table-column>
                <el-table-column label="DESC">
                  <template slot-scope="{ row }">
                    <div style="margin-top: 5px; display: flex">
                      <div style>
                        <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
                      </div>

                      <div style="margin-left: 13px">
                        <div class="div-zoom">
                          <a @click="linkTo(row.goodsId, row.skuId)">
                            {{ row.goodsName }}
                          </a>
                        </div>
                        <span style="font-size: 12px; color: #999999">{{
                          row.goodsVO.enAlias
                        }}</span>
                        <!-- 添加优惠信息显示 -->
                        <span v-if="row.promotionType" style="font-size: 12px; color: #ff6b6b">
                          {{ getPromotionTypeText(row.promotionType) }}
                        </span>
                        <span v-if="row.goodsVO.skuList[0].promotionFlag" style="font-size: 16px; color: red">
                          每周特价商品
                        </span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="goodsVO.marketSku" label="SKU" width="130">
                </el-table-column>
                <el-table-column prop="unitPrice" label="PRICE" width="80">
                  <template slot-scope="{ row }">
                    {{
                      row.unitPrice
                        ? $options.filters.unitPrice(row.unitPrice, "$")
                        : $options.filters.unitPrice(0, "$")
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="QTY" width="80">
                  <template slot-scope="{ row }">
                    {{ row.num - (row.returnGoodsNumber || 0) }}
                  </template>
                </el-table-column>
                <el-table-column label="口" width="80">
                  <div :style="{
                    width: '60px',
                    height: '40px',
                    border: '1px solid #000',
                  }"></div>
                </el-table-column>
              </el-table>
            </div>
            </Col>
            <Col span="24">
            <div class="goods-total" style="text-align: right">
              <ul>
                <li>
                  <span class="label">Subtotal：</span>
                  <span class="txt">
                    {{
                      orderInfo.order.priceDetailDTO.goodsPrice
                      | unitPrice("$")
                    }}
                  </span>
                </li>
                <li v-if="
                  orderInfo.order.priceDetailDTO.discountPrice &&
                  orderInfo.order.priceDetailDTO.discountPrice > 0
                ">
                  <span class="label">优惠金额：</span>
                  <span class="txt">{{
                    orderInfo.order.priceDetailDTO.discountPrice
                    | unitPrice("$")
                  }}</span>
                </li>

                <li v-if="
                  orderInfo.order.priceDetailDTO.couponPrice &&
                  orderInfo.order.priceDetailDTO.couponPrice > 0
                ">
                  <span class="label">Tax：</span>
                  <span class="txt">{{
                    orderInfo.order.priceDetailDTO.couponPrice
                    | unitPrice("$")
                  }}</span>
                </li>
                <li v-if="
                  orderInfo.order.priceDetailDTO.discountPriceDetail !=
                  undefined &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail !=
                  null &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail != ''
                "></li>
                <li>
                  <span class="label">Shipping Total：</span>
                  <span class="txt">
                    {{ orderInfo.order.postPrice | unitPrice("$") }}
                  </span>
                </li>
                <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
                  <span class="label">修改金额：</span>
                  <span class="txt theme_color">${{
                    orderInfo.order.priceDetailDTO.updatePrice | unitPrice
                  }}</span>
                </li>
                <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
                  <span class="label">使用积分：</span>
                  <span class="txt">
                    {{ orderInfo.order.priceDetailDTO.payPoint }}
                  </span>
                </li>
                <li>
                  <span class="label">Order Total：</span>
                  <span class="txt flowPrice">${{ orderInfo.order.flowPrice | unitPrice }}</span>
                </li>
              </ul>
            </div>
            </Col>
          </Row>
        </div>
      </div>

      <div slot="footer" style="text-align: right">
        <Button @click="printFjModal = false">关闭</Button>
        <Button type="primary" v-print="printFjInfoObj">打印分拣单</Button>
      </div>
    </Modal>
    <!-- 打印发货单 -->
    <Modal v-model="printModal" width="1100" @on-cancel="printCancel">
      <p slot="header" style="line-height: 26px; height: 26px">
        <span style="float: left">打印发货单</span>
        <Button size="small" style="margin-right: 35px; float: right; padding-bottom: 2px" @click="printHiddenInfo">
          <template v-if="printHiddenFlag">显示</template>
          <template v-else>隐藏</template>敏感信息
        </Button>
      </p>
      <div style="overflow-y: auto; overflow-x: hidden" id="printInfo">
        <div class="print-page" v-for="(orderInfo, index) in printList" :key="'printList' + index">
          <Row>
            <Col>
            <img src="https://minio.foodyie.net/lilishop/MANAGER/undefined/9467528b82a942959ef9de76feccd641.png"
              width="150" />
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="text-align: center; font-size: 14px; font-weight: bold">
              Delivery Note 送货单
            </div>
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="text-align: center; font-size: 14px; font-weight: bold">
              Order No.{{ orderInfo.order.orderLookSn }}
            </div>
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col>
            <div style="text-align: center; font-size: 12px">
              Order Date.{{ orderInfo.order.completeTime }}
            </div>
            </Col>
          </Row>
          <div style="border: 2px solid #000; padding: 5px">
            <Row>
              <Col>
              <div style="text-align: center; font-size: 18px; font-weight: bold">
                Customer Contact
              </div>
              </Col>
            </Row>
            <Row v-if="orderInfo.order.remark !== ''">
              <Col span="24">
              <p class="lineH30 f14">remark：{{ orderInfo.order.remark }}</p>
              </Col>
            </Row>
            <Row>
              <Col span="12">
              <p class="lineH30 f14">{{ orderInfo.order.consigneeName }}</p>
              </Col>
              <Col span="12" v-if="orderInfo.order.consigneeMobile">
              <p class="lineH30 f14" v-if="printHiddenFlag">
                tel：{{
                  orderInfo.order.consigneeMobile.replace(
                    /^(.{3})(?:\d+)(.{4})$/,
                    "$1****$2"
                  )
                }}
              </p>
              <p class="lineH30 f14" v-else>
                tel：{{ orderInfo.order.consigneeMobile }}
              </p>
              </Col>
            </Row>
            <Row>
              <Col span="24">
              <p class="lineH30 f14">
                shipping address：{{ orderInfo.order.consigneeAddressPath
                }}{{ orderInfo.order.consigneeDetail }}
              </p>
              </Col>
            </Row>
              <!-- 在这里添加订单备注和商家备注 -->
              <Row >
              <Col span="24">
              <p class="lineH30 f14">Buyer Remark：{{ orderInfo.order.remark }}</p>
              </Col>
            </Row>
            <Row>
              <Col span="24">
              <p class="lineH30 f14">Order Remark：{{ orderInfo.order.sellerRemark }}</p>
              </Col>
            </Row>
            <Row>
              <Col>
              <div style="text-align: center; font-size: 18px; font-weight: bold">
                Store Contact
              </div>
              </Col>
            </Row>
            <Row>
              <Col span="12">
              <p class="lineH30 f14">丰泰易购foodyie.ca</p>
              </Col>
              <Col span="12">
              <p class="lineH30 f14">GST/HST：779409531RT0001</p>
              </Col>
            </Row>
            <Row>
              <Col span="12">
              <p class="lineH30 f14">tel：6472739168</p>
              </Col>
              <Col span="12">
              <p class="lineH30 f14">email：cs.foodyie@gmail.com</p>
              </Col>
            </Row>
          </div>

          <Row>
            <Col span="24">
            <p class="printgoodtitle">Goods Info</p>
            <div class="printgoodinfo">
              <el-table :data="orderInfo.data.filter(item => (item.num - (item.returnGoodsNumber || 0)) > 0)" :columns="groupShipColumns1" border>
                <el-table-column label="DESC">
                  <template slot-scope="{ row }">
                    <div style="margin-top: 5px; display: flex">
                      <div style>
                        <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
                      </div>

                      <div style="margin-left: 13px">
                        <div class="div-zoom">
                          <a @click="linkTo(row.goodsId, row.skuId)">
                            {{ row.goodsName }}
                          </a>
                        </div>
                        <span style="font-size: 12px; color: #999999">{{
                          row.goodsVO.enAlias
                        }}</span>
                        <!-- 添加优惠信息显示 -->
                        <span v-if="row.promotionType" style="font-size: 12px; color: #ff6b6b">
                          {{ getPromotionTypeText(row.promotionType) }}
                        </span>
                        <span v-if="row.goodsVO.skuList[0].promotionFlag" style="font-size: 16px; color: red">
                          每周特价商品
                        </span>
                        <li v-if="row.reason">
                          <span class="label">退款原因：</span>
                          <span class="txt">{{ row.reason }}</span>
                        </li>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="unitPrice" label="PRICE" width="180">
                  <template slot-scope="{ row }">
                    {{
                      row.unitPrice
                        ? $options.filters.unitPrice(row.unitPrice, "$")
                        : $options.filters.unitPrice(0, "$")
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="QTY" width="180">
                  <template slot-scope="{ row }">
                    {{ row.num - (row.returnGoodsNumber || 0) }}
                  </template>
                </el-table-column>
                <el-table-column prop="subTotal" label="AMT" width="180">
                  <template slot-scope="{ row }">
                    {{ $options.filters.unitPrice(row.flowPrice, "$") }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
            </Col>
            <Col span="24">
            <div class="goods-total" style="text-align: right">
              <ul>
                <li>
                  <span class="label">Subtotal：</span>
                  <span class="txt">
                    {{
                      orderInfo.order.priceDetailDTO.goodsPrice
                      | unitPrice("$")
                    }}
                  </span>
                </li>
                <li v-if="
                  orderInfo.order.priceDetailDTO.discountPrice &&
                  orderInfo.order.priceDetailDTO.discountPrice > 0
                ">
                  <span class="label">优惠金额：</span>
                  <span class="txt">{{
                    orderInfo.order.priceDetailDTO.discountPrice
                    | unitPrice("$")
                  }}</span>
                </li>

                <li v-if="
                  orderInfo.order.priceDetailDTO.couponPrice &&
                  orderInfo.order.priceDetailDTO.couponPrice > 0
                ">
                  <span class="label">Tax：</span>
                  <span class="txt">{{
                    orderInfo.order.priceDetailDTO.couponPrice
                    | unitPrice("$")
                  }}</span>
                </li>
                <li v-if="
                  orderInfo.order.priceDetailDTO.discountPriceDetail !=
                  undefined &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail !=
                  null &&
                  orderInfo.order.priceDetailDTO.discountPriceDetail != ''
                "></li>
                <li>
                  <span class="label">Shipping Total：</span>
                  <span class="txt">
                    {{ orderInfo.order.postPrice | unitPrice("$") }}
                  </span>
                </li>
                <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
                  <span class="label">修改金额：</span>
                  <span class="txt theme_color">${{
                    orderInfo.order.priceDetailDTO.updatePrice | unitPrice
                  }}</span>
                </li>
                <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
                  <span class="label">使用积分：</span>
                  <span class="txt">
                    {{ orderInfo.order.priceDetailDTO.payPoint }}
                  </span>
                </li>
                <li>
                  <span class="label">Order Total：</span>
                  <span class="txt flowPrice">${{ orderInfo.order.flowPrice | unitPrice }}</span>
                </li>
              </ul>
            </div>
            </Col>
          </Row>
          <Row style="justify-content: center">
            <Col style="padding: 5px 20px; font-size: 12px" span="24">For more information please log in to My
            foodyie.ca,
            scan our
            WeChat QR code (WeChat ID: foodyie), or call us at 1.647.273.9168
            (English/Chinese) Monday-Friday from 9am to 5pm EST. For
            information about return, please read our Return Policy. We hope
            you will enjoy your purchase!</Col>
          </Row>
          <Row style="justify-content: center">
            <Col style="
                text-align: center;
                padding: 5px 20px;
                font-size: 12px;
                font-weight: bold;
              " span="24">退货政策</Col>
          </Row>
          <Row style="justify-content: center">
            <Col style="
                text-align: left;
                padding: 5px 20px;
                font-size: 12px;
                border-top: 1px dashed #000;
              " span="24">
            除特殊商品类以外，我们接受自到货日期7天内因质量问题而发起的退货申请；
            <br />除特殊商品类以外，我们接受自到货日期7天内因质量问题而发起的退货申请；
            <br />水果、生鲜、冷冻冷藏品、熟食和蛋糕等特殊商品若需退货，请在货物送达后的48小时内联系丰泰易购，此类商品超过48小时将无法退/换货。若非商品质量问题，请理解我们无法提供此类商品的退货服务；
            <br />对于有雪糕、生鲜、冷冻冷藏等易变质的商品，送货时如遇到无人签收的情况，司机则会将货物带回超市。经客人同意会进行第二次配送，第二次配送需要收取您7.99加币的运费；
            <br />收货时如发现商品配送有误、包装破损、产品腐烂、数量不符等情况，请在24小时内联系丰泰易购客服，以便我们能尽快为您处理。
            <br />丰泰易购客服联系方式有：丰泰易购微信客服号：foodyie/丰泰易购在线客服
            <br />**丰泰易购保留拒绝任何非合理退换货请求的最终解释权****丰泰易购保留拒绝任何非合理退换货请求的最终解释权**
            <br />
            <br />
            </Col>
          </Row>
        </div>
      </div>

      <div slot="footer" style="text-align: right">
        <Button @click="printModal = false">关闭</Button>
        <Button type="primary" v-print="printInfoObj">打印发货单</Button>
      </div>
    </Modal>
    <!-- 添加导出月报的模态框 -->
    <Modal v-model="exportReportModal" title="导出月报" @on-cancel="exportReportModal = false">
      <Form :model="exportReportForm" :label-width="80">
        <FormItem label="选择月份">
          <DatePicker v-model="exportReportForm.date" type="month" format="yyyy-M" placeholder="请选择月份"
            style="width: 200px">
          </DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="exportReportModal = false">取消</Button>
        <Button type="primary" @click="() => exportReport('total')" :loading="exportLoading">导出月度总报表</Button>
        <Button type="primary" @click="() => exportReport('normal')" :loading="exportLoading">导出月度部门报表</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Order from "@/api/order";
import JsonExcel from "vue-json-excel";
import Cookies from "js-cookie";
export default {
  name: "orderList",
  components: {
    "download-excel": JsonExcel,
  },
  data() {
    return {
      printInfoObj: {
        id: "printInfo", //要打印的id名 无#号
        popTitle: "&nbsp;", //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "", //头部文字 默认空
        // ------------------------添加下面代码---------------------------
        beforeEntryIframe() {
          const cells = document.querySelectorAll(".cell");
          const tableNode = document.querySelectorAll(
            ".el-table__header,.el-table__body"
          );
          // el-table 打印不全的问题
          for (let j = 0; j < tableNode.length; j++) {
            const tableItem = tableNode[j];
            tableItem.style.width = "100%";
            const child = tableItem.childNodes;
            for (let i = 0; i < child.length; i++) {
              const element = child[i];
              if (element.localName === "colgroup") {
                element.innerHTML = "";
              }
            }
          }
          // el-table 格子里面打印超过格子的问题
          for (let i = 0; i < cells.length; i++) {
            const cell = cells[i];
            cell.style.width = "100%";
            cell.removeAttribute("style");
          }
        },
      },
      printFjInfoObj: {
        id: "printFjInfo", //要打印的id名 无#号
        popTitle: "&nbsp;", //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "", //头部文字 默认空
        // ------------------------添加下面代码---------------------------
        beforeEntryIframe() {
          const modals = document.querySelectorAll(".ivu-modal");
          let modal = "";
          modals.forEach((element) => {
            if (element.style.display != "none") {
              modal = element;
            }
          });
          const cells = modal.querySelectorAll(".cell");
          const tableNode = modal.querySelectorAll(
            ".el-table__header,.el-table__body"
          );
          const widthArr = ["10%", "15%", "40%", "20%", "15%", "15%", "15%"];
          // el-table 打印不全的问题
          for (let j = 0; j < tableNode.length; j++) {
            const tableItem = tableNode[j];
            tableItem.style.width = "100%";
            const child = tableItem.childNodes;
            for (let i = 0; i < child.length; i++) {
              const element = child[i];
              if (element.localName === "colgroup") {
                const headcolgroupCol = element.getElementsByTagName("col");
                const headcolgroupCol1 = element.getElementsByTagName("col");
                console.log(headcolgroupCol, "headcolgroupCol");
                console.log(headcolgroupCol1, "headcolgroupCol1");
                widthArr.forEach((val, index) => {
                  if (headcolgroupCol[index].width) {
                    headcolgroupCol[index].width = val;
                    headcolgroupCol1[index].width = val;
                  }
                });
                // element.innerHTML = "";
              }
            }
          }
          // el-table 格子里面打印超过格子的问题
          for (let i = 0; i < cells.length; i++) {
            const cell = cells[i];
            cell.style.width = "100%";
            cell.removeAttribute("style");
          }
        },
      },
      groupShipColumns1: [
        {
          title: "AMT",
          key: "subTotal",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.flowPrice, "$")
            );
          },
        },
      ],
      groupShipColumns2: [
        {
          title: "口",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("div", {
              style: {
                width: "60px",
                height: "40px",
                border: "1px solid #000",
              },
            });
          },
        },
      ],
      printModal: false, //弹出打印发货单
      printFjModal: false,
      updateForm: {},
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
        orderSn: "",
        buyerName: "",
        orderStatus: "",
        orderType: "NORMAL",
        consigneeNo: "", // 邮编的逗号分隔字符串
      },
      selectDate: null,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "订单号",
          key: "sn",
          width: 120,
          tooltip: true,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  color: "blue",
                  cursor: "pointer",
                },
                on: {
                  click: () => {
                    this.detail(params.row);
                  },
                },
              },
              params.row.orderLookSn
            );
          },
        },
        {
          title: "订单来源",
          key: "clientType",
          width: 120,
          render: (h, params) => {
            if (params.row.clientType == "H5") {
              return h("div", {}, "移动端");
            } else if (params.row.clientType == "PC") {
              return h("div", {}, "PC端");
            } else if (params.row.clientType == "WECHAT_MP") {
              return h("div", {}, "小程序端");
            } else if (params.row.clientType == "APP") {
              return h("div", {}, "APP端");
            } else {
              return h("div", {}, params.row.clientType);
            }
          },
        },
        // {
        //   title: "订单类型",
        //   key: "orderPromotionType",
        //   width: 120,
        //   render: (h, params) => {
        //     if (params.row.orderPromotionType == "NORMAL") {
        //       return h("div", [
        //         h("tag", { props: { color: "blue" } }, "普通订单"),
        //       ]);
        //     } else if (params.row.orderPromotionType == "PINTUAN") {
        //       return h("div", [
        //         h("tag", { props: { color: "volcano" } }, "拼团订单"),
        //       ]);
        //     } else if (params.row.orderPromotionType == "GIFT") {
        //       return h("div", [
        //         h("tag", { props: { color: "green" } }, "赠品订单"),
        //       ]);
        //     } else if (params.row.orderPromotionType == "POINTS") {
        //       return h("div", [
        //         h("tag", { props: { color: "geekblue" } }, "积分订单"),
        //       ]);
        //     } else if (params.row.orderPromotionType == "KANJIA") {
        //       return h("div", [
        //         h("tag", { props: { color: "pink" } }, "砍价订单"),
        //       ]);
        //     }
        //   },
        // },
        {
          title: "会员编号",
          key: "memberId",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "支付时间",
          key: "createTime",
          width: 170,
        },
        {
          title: "订单金额",
          key: "flowPrice",
          minWidth: 100,
          tooltip: true,
          render: (h, params) => {
            return h("priceColorScheme", {
              props: {
                value: params.row.flowPrice,
                color: this.$mainColor,
                unit: "$",
              },
            });
          },
        },
        {
          title: "收货人",
          key: "memberName",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "电话",
          key: "memberName",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "收货地址",
          key: "consigneeAddressPath",
          minWidth: 200,
          tooltip: true,
          render: (h, params) => {
            return h("div", params.row.consigneeAddressPath);
          },
        },
        {
          title: "订单状态",
          key: "orderStatus",
          minWidth: 100,
          render: (h, params) => {
            if (params.row.orderStatus == "UNPAID") {
              return h("div", [
                h("tag", { props: { color: "magenta" } }, "未付款"),
              ]);
            } else if (params.row.orderStatus == "PAID") {
              return h("div", [
                h("tag", { props: { color: "blue" } }, "已付款"),
              ]);
            } else if (params.row.orderStatus == "UNDELIVERED") {
              return h("div", [
                h("tag", { props: { color: "geekblue" } }, "待发货"),
              ]);
            } else if (params.row.orderStatus == "STAY_PICKED_UP") {
              return h("div", [
                h("tag", { props: { color: "geekblue" } }, "待自提"),
              ]);
            } else if (params.row.orderStatus == "SORTINGCOMPLETED") {
              return h("div", [
                h("tag", { props: { color: "cyan" } }, "分拣完成"),
              ]);
            } else if (params.row.orderStatus == "DELIVERYINPROGRESS") {
              return h("div", [
                h("tag", { props: { color: "cyan" } }, "配送中"),
              ]);
            } else if (params.row.orderStatus == "DELIVERED") {
              return h("div", [
                h("tag", { props: { color: "cyan" } }, "已发货"),
              ]);
            } else if (params.row.orderStatus == "COMPLETED") {
              return h("div", [
                h("tag", { props: { color: "green" } }, "已完成"),
              ]);
            } else if (params.row.orderStatus == "TAKE") {
              return h("div", [
                h("tag", { props: { color: "volcano" } }, "待核验"),
              ]);
            } else if (params.row.orderStatus == "CANCELLED") {
              return h("div", [
                h("tag", { props: { color: "red" } }, "已取消"),
              ]);
            }
          },
        },

        {
          title: "操作",
          key: "action",
          align: "center",
          width: 100,
          render: (h, params) => {
            if (params.row.orderStatus == "UNDELIVERED") {
              //待发货
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.sn, "SORTINGCOMPLETED");
                      },
                    },
                  },
                  "分拣完成"
                ),
              ]);
            } else if (params.row.orderStatus == "SORTINGCOMPLETED") {
              //分拣完成
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      marginTop: "5px",
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.sn, "UNDELIVERED");
                      },
                    },
                  },
                  "取消分拣"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      marginTop: "5px",
                      marginBottom: "5px",
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.sn, "DELIVERYINPROGRESS");
                      },
                    },
                  },
                  "开始配送"
                ),
              ]);
            } else if (params.row.orderStatus == "DELIVERYINPROGRESS") {
              //配送中
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      marginTop: "5px",
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.sn, "SORTINGCOMPLETED");
                      },
                    },
                  },
                  "取消配送"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      marginTop: "5px",
                      marginBottom: "5px",
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.sn, "COMPLETED");
                      },
                    },
                  },
                  "已完成"
                ),
              ]);
            } else {
              return h("div", {}, "当前状态无法操作");
            }

            // return h("div", [
            //   h(
            //     "Button",
            //     {
            //       props: {
            //         type: "info",
            //         size: "small",
            //       },
            //       style: {
            //         marginRight: "5px",
            //       },
            //       on: {
            //         click: () => {
            //           this.detail(params.row);
            //         },
            //       },
            //     },
            //     "查看"
            //   ),
            // ]);
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      excelColumns: {
        // 导出excel的参数
        编号: "index",
        订单号: "sn",
        收货人: "consigneeName",
        收货人联系电话: "consigneeMobile",
        收货地址: "consigneeAddress",
        商品名称: "goodsName",
        商品价格: "goodsPrice",
        订单金额: "flowPrice",
        商品数量: "num",
        店铺名称: "storeName",
        创建时间: "createTime",
      },
      selectList: [], // 多选数据
      selectCount: 0, // 多选计数
      showModal: false,
      printHiddenFlag: false, //隐藏信息
      orderInfo: {
        // 订单信息
        order: {
          priceDetailDTO: {},
        },
      },
      printList: [],
      downtownAreas: [
        "M4A",
        "M4B",
        "M4C",
        "M4E",
        "M4G",
        "M4H",
        "M4J",
        "M4K",
        "M4L",
        "M4M",
        "M4N",
        "M4P",
        "M4R",
        "M4S",
        "M4T",
        "M4V",
        "M4W",
        "M4X",
        "M4Y",
        "M5N",
        "M5P",
        "M6C",
        "M7Y",
        "M5A",
        "M5B",
        "M5C",
        "M5E",
        "M5G",
        "M5H",
        "M5J",
        "M5S",
        "M5V",
        "M5T",
        "M5R",
        "M5W",
        "M5X",
        "M5K",
        "M5L",
        "M6E",
        "M6L",
        "M6M",
        "M6N",
        "M6G",
        "M6J",
        "M6K",
        "M6H",
        "M6R",
        "M6P",
        "M6S",
      ],
      etobicokeAreas: [
        "M8V",
        "M8W",
        "M8X",
        "M8Z",
        "M8Y",
        "M9A",
        "M9B",
        "M9C",
        "M9P",
        "M9R",
        "M9W",
        "M9V",
      ],
      mississaugAreas: [
        "L4T",
        "L4V",
        "L4W",
        "L4X",
        "L4Y",
        "L4Z",
        "L5A",
        "L5B",
        "L5C",
        "L5E",
        "L5G",
        "L5H",
        "L5J",
        "L5K",
        "L5L",
        "L5W",
        "L5M",
        "L5N",
        "L5P",
        "L5R",
        "L5S",
        "L5T",
        "L5V",
      ],
      scarboughAreas: [
        "M1H",
        "M1P",
        "M1R",
        "M1T",
        "M1S",
        "M1V",
        "M1W",
        "M1X",
        "M1B",
        "M1C",
        "M1E",
        "M1G",
        "M1J",
        "M1M",
        "M1K",
        "M1L",
        "M1N",
      ],
      markhamAreas: ["L6C", "L3R", "L6G", "L6B", "L3P", "L6E", "L3S", "L3T"],
      richmondHillAreas: ["L4C", "L4B", "L4S", "L4E"],
      northYorkAreas: [
        "M2R",
        "M2M",
        "M2L",
        "M2N",
        "M2K",
        "M2H",
        "M2J",
        "M2P",
        "M3A",
        "M3B",
        "M3C",
        "M3H",
        "M5M",
        "M6B",
        "M3N",
        "M3J",
        "M3L",
        "M3M",
        "M3K",
        "M6A",
        "M9M",
        "M9N",
        "M9L",
      ],
      vaughanAreas: ["L4L", "L4H", "L6A", "L4K", "L4J"],
      auroraAreas: ["L4G"],
      newmarketAreas: ["L3X", "L3Y"],
      exportReportModal: false,
      exportReportForm: {
        date: null
      },
      exportLoading: false
    };
  },
  methods: {
    showExportReportModal() {
      this.exportReportModal = true;
    },

    async exportReport(type) {
      if (!this.exportReportForm.date) {
        this.$Message.warning('请选择导出月份');
        return;
      }

      const year = this.exportReportForm.date.getFullYear();
      const month = this.exportReportForm.date.getMonth() + 1;
      const monthStr = `${year}-${month}`;

      this.exportLoading = true;
      try {
        let res = '';
        if (type == 'total') {
          res = await API_Order.orderPushAll({
            month: monthStr,
          });
        } else {
          res = await API_Order.orderPush({
            month: monthStr,
          });
        }
        
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });

        const link = document.createElement("a");
        link.download = `${monthStr}月报${type === 'total' ? '(总)' : ''}.xls`;
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);

        this.exportReportModal = false;
        this.$Message.success('导出成功');
      } catch (err) {
        this.$Message.error('导出失败，请重试');
        console.error(err);
      } finally {
        this.exportLoading = false;
      }
    },
    printCancel() { },
    printHiddenInfo() {
      this.printHiddenFlag = !this.printHiddenFlag;
    },
    //打印发货单
    async printOrder() {
      if (this.selectCount > 0) {
        this.printList = [];
        for (let index = 0; index < this.selectList.length; index++) {
          const element = this.selectList[index];
          let res = await API_Order.getOrderDetail(element.sn);
          if (res.result.orderItemsVO.length) {
            res.result.data = res.result.orderItemsVO.map((item) => {
              return {
                ...item,
                ___num: item.num,
                _disabled: item.deliverNumber >= item.num,
                canNum: item.num - item.deliverNumber,
              };
            });
          }
          this.printList.push(res.result);
        }
        this.printModal = true;
      } else {
        this.$Message.warning("请选择订单!");
      }
    },
    //打印分拣单
    async printFjOrder() {
      if (this.selectCount > 0) {
        this.printList = [];
        for (let index = 0; index < this.selectList.length; index++) {
          const element = this.selectList[index];
          let res = await API_Order.getOrderDetail(element.sn);
          if (res.result.orderItemsVO.length) {
            res.result.data = res.result.orderItemsVO.map((item) => {
              return {
                ...item,
                ___num: item.num,
                _disabled: item.deliverNumber >= item.num,
                canNum: item.num - item.deliverNumber,
              };
            });
          }
          this.printList.push(res.result);
        }
        this.printFjModal = true;
      } else {
        this.$Message.warning("请选择订单!");
      }
    },
    changeStatus(sn, status) {
      let params = {
        orderSns: [sn],
        status: status,
      };
      API_Order.updateStatus(params).then((res) => {
        console.log(res, "resres");
        this.getDataList();
        this.$Message.success("修改状态成功！");
      });
    },
    confirmUpdate() {
      let orderSns = [];
      for (let index = 0; index < this.selectList.length; index++) {
        const element = this.selectList[index];
        orderSns.push(element.sn);
      }
      let params = {
        orderSns: orderSns,
        status: this.updateForm.orderStatus,
      };
      API_Order.updateStatus(params).then((res) => {
        console.log(res, "resres");
        this.getDataList();
        this.showModal = false;
        this.$Message.success("修改成功！");
      });
    },
    showUpdate() {
      if (this.selectCount > 0) {
        this.showModal = true;
      } else {
        this.$Message.warning("当前没有选中订单！");
      }
    },
    // 添加选中项
    changeSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    /**
     * 批量发货
     */
    expressOrderDeliver() {
      this.$router.push({
        path: "/export-order-deliver",
      });
    },
    // 初始化数据
    init() {
      this.getDataList();
    },
    // 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    // 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    // 搜索订单
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 重置
    handleReset() {
      this.searchForm = {};
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      (this.searchForm.orderType = "NORMAL"),
        // 重新加载数据
        this.getDataList();
    },
    // 起始时间处理
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    // 获取表格数据
    getDataList() {
      this.loading = true;
      API_Order.getOrderList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    // 导出的待发货订单数据
    async exportOrder() {
      let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
      const params = {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10000, // 页面大小
        sort: "startDate", // 默认排序字段
        order: "desc", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
        orderSn: "",
        buyerName: "",
        tag: "WAIT_SHIP",
        orderType: "NORMAL",
        storeId: userInfo.id,
      };
      const res = await API_Order.queryExportOrder(params);
      if (res.success) {
        if (res.result.length === 0) {
          this.$Message.warning("暂无待发货订单");
          return [];
        }
        for (let i = 0; i < res.result.length; i++) {
          res.result[i].index = i + 1;
          res.result[i].consigneeAddress =
            res.result[i].consigneeAddressPath.replace(/,/g, "") +
            res.result[i].consigneeDetail;
          res.result[i].goodsPrice = this.$options.filters.unitPrice(
            res.result[i].goodsPrice,
            "$"
          );
          res.result[i].flowPrice = this.$options.filters.unitPrice(
            res.result[i].flowPrice,
            "$"
          );
        }
        return res.result;
      } else {
        this.$Message.warning("导出订单失败，请重试");
      }
    },
    // 查看订单详情
    detail(v) {
      let sn = v.sn;
      this.$options.filters.customRouterPush({
        name: "order-detail",
        query: { sn: sn },
      });
    },
    handleAreaChange(value) {
      if (!value) {
        this.searchForm.consigneeNo = "";
        return;
      }

      const areaMap = {
        DownTown: this.downtownAreas,
        Etobicoke: this.etobicokeAreas,
        Mississaug: this.mississaugAreas,
        Scarbough: this.scarboughAreas,
        Markham: this.markhamAreas,
        "Richmond Hill": this.richmondHillAreas,
        "North York": this.northYorkAreas,
        Vaughan: this.vaughanAreas,
        Aurora: this.auroraAreas,
        Newmarket: this.newmarketAreas,
      };
      console.log(123321, (areaMap[value] || []).join(","));

      // 将邮编数组转换为逗号分隔的字符串
      this.searchForm.consigneeNo = (areaMap[value] || []).join(",");
    },
    // 获取优惠类型文本的方法
    getPromotionTypeText(promotionType) {
      if (!promotionType) return "";

      let resultText = [];
      const types = promotionType.split(",");

      const promotionMap = {
        PINTUAN: "拼团",
        SECKILL: "秒杀",
        COUPON: "优惠券",
        FULL_DISCOUNT: "满减",
        POINTS_GOODS: "积分商品",
        SPECIAL_OFFER: "每周特价",
      };

      types.forEach((type) => {
        if (promotionMap[type]) {
          resultText.push(promotionMap[type]);
        }
      });

      return resultText.length ? resultText.join(" ") : "暂无促销";
    },
  },
  mounted() {
    this.init();
  },
  // 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false;
    next();
  },
};
</script>
<style lang="scss">
// 建议引入通用样式 可删除下面样式代码
@import "@/styles/table-common.scss";

.export {
  margin: 10px 20px 10px 0;
}

.print-page {
  page-break-after: always;

  .ivu-table td {
    height: auto;
  }
}
</style>
